import {connect} from 'react-redux';
import { setToken } from '@/redux/action/index';
import Auth from '@/util/auth';
import { Form, Input, Button, Checkbox, Card } from 'antd';
import less from './index.less';
const FormItem = Form.Item;

class Login extends React.Component {
  handleSubmit = (e) => {
    e.preventDefault();
    this.props.form.validateFields((errors, values) => {
      if (!!errors) {
        console.log('Errors in form!!!');
        return;
      }
      console.log('Submit!!!');
      console.log('收到表单值：', this.props.form.getFieldsValue());

      // TO-DO 这里临时设置为成功登录   
      const { dispatch } = this.props;
      dispatch(setToken('token_jaiofoiajeoijfioaewjf'));
      Auth.setLoginStatus();//设置cookie为登录状态
      this.props.history.push('/');
    });
  }

  render() {
    const { getFieldProps } = this.props.form;
    return (
      <Card className={less.login_card}>
        <Form horizontal onSubmit={this.handleSubmit}>
          <FormItem
            label="账户"
          >
            <Input placeholder="请输入账户名"
              {...getFieldProps('userName', {
                rules: [
                  { required: true, min: 5, message: '用户名至少为 5 个字符' },
                ],
              })}
            />
          </FormItem>
          <FormItem
            label="密码"
          >
            <Input type="password" placeholder="请输入密码"
              {...getFieldProps('password', {
                rules: [
                  { required: true, message: '请输入密码' },
                ]
              })}
            />
          </FormItem>
          <div className="clearfix">
            <FormItem>
              <Checkbox {...getFieldProps('agreement')}>记住我</Checkbox>
            </FormItem>
          </div>
          <Button type="primary" htmlType="submit" className={less.login_btn}>登录</Button>
        </Form>
      </Card>

    )
  }
}


export default connect()(Form.create()(Login))